<template>
  <div
    class="aside-friend-sidebar"
    v-loading="isLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <el-main>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        mode="vertical"
      >
        <div v-show="!isSearch">
          <!-- <div> -->
          <el-menu-item
            v-for="(friend, index) in friendMenu"
            :key="index"
            :index="friend.id.toString()"
            @click="getChat(friend)"
            class="el-menu-item"
          >
            <div v-if="friend.chatType === 1 || friend.type === 1">
              <el-badge
                :ref="friend.targetId"
                is-dot
                :class="{
                  'badge-online': isOnline(friend.isOnline),
                  'badge-off': !isOnline(friend.isOnline),
                }"
              >
                <img
                  v-if="friend.chatAvatar"
                  v-lazy="friend.chatAvatar"
                  class="avatar-small lazy-image"
                  alt
                  @error="handleImageError"
                />
              </el-badge>
            </div>
            <div v-else>
              <img
                v-if="friend.chatAvatar"
                v-lazy="friend.chatAvatar"
                class="avatar-small lazy-image"
                alt
                @error="handleImageError"
              />
            </div>
            <div
              @contextmenu.prevent="
                rightClick(
                  friend.targetId,
                  friend.displayName,
                  friend.chatType,
                  friend.id,
                  $event
                )
              "
              class="friend-info-column"
            >
              <span class="friend-remark">{{ friend.displayName }}</span>
              <!-- latestNews,latestTime -->
              <span class="friend-latestNews">{{
                text(friend.latestMessage)
              }}</span>
            </div>
            <div class="friend-latestTime">
              {{ chatTime(friend.latestTime) }}
            </div>
            <div
              :class="[
                friend.isTop === 1 ? 'friend-isStar1' : 'friend-isStar2',
              ]"
              v-if="friend.isStar === 1"
            >
              <span class="star-icon el-icon-star-on"></span>
            </div>
            <div class="unread-badge-position" v-if="friend.unreadCount > 0">
              <el-badge :value="friend.unreadCount" :max="99" class="item">
                <span></span>
              </el-badge>
            </div>
            <div class="top-icon-position" v-if="friend.isTop === 1">
              <span class="top-badge">置顶</span>
            </div>
          </el-menu-item>
          <!-- </div> -->
        </div>
      </el-menu>
      <div v-show="isSearch">
        <FriendSearch ref="friendSearch" @clickSession="clickSession" />
      </div>
      <div
        class="empty-friends-container"
        v-if="friendMenu.length <= 0 && !isSearch"
      >
        <span class="empty-friends-text">暂无好友</span>
      </div>
      <div
        v-show="rightClickView"
        class="float-window"
        :style="{ left: `${x}px`, top: `${y}px` }"
      >
        <div class="opear">
          <div class="border-bottom-light">
            <div
              class="detail"
              @click.prevent="top(1)"
              v-if="this.sidewaysStatus.isTop === 0"
            >
              <span>置顶</span>
            </div>
            <div class="detail" @click="cancelTop(0)" v-else>
              <span>取消置顶</span>
            </div>
            <div
              class="detail"
              @click="markUnread"
              v-if="
                this.sidewaysStatus.isUnreadCount <= 0 ||
                this.sidewaysStatus.isUnreadCount === null
              "
            >
              <span>标记为未读</span>
            </div>
            <div
              class="detail"
              @click="clearUnreadCount(rightClickFriendId)"
              v-else
            >
              <span>取消未读</span>
            </div>
            <div class="detail" @click="clearChatHistory">清空记录</div>
          </div>
          <div class="border-bottom-light">
            <div class="detail" @click="delFriend">删除好友</div>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import service from "../../utils/request";
import FriendSearch from "./FriendSearch";
import { createThrottle, createDebounce } from '@/utils/debounceThrottle';
import { createImageLazyLoader } from '@/utils/lazyLoad';

export default {
  name: "AsideFriend",
  components: {
    FriendSearch,
  },
  data() {
    return {
      loading: false,
      rightClickView: false,
      x: 0, // 浮动窗口的X坐标
      y: 0, // 浮动窗口的Y坐标
      isSearch: false,
      showRules: "1",
      keyword: "",
      insertLocation: 0,
      sidewaysStatus: {
        isTop: 0,
        isUnreadCount: 0,
      },
      remark: null,
      username: null,
      activeIndex: "0",
      rightClickRemark: null,
      rightClickFriendId: null,
      // 懒加载器
      imageLazyLoader: null,
      // 防抖节流方法
      throttledScroll: null,
      debouncedSearch: null,
    };
  },
  computed: {
    // 使用Vuex中的聊天列表数据
    friendMenu() {
      return this.$store.getters['chatList/filteredList'];
    },
    // 获取加载状态
    isLoading() {
      const loading = this.$store.state.chatList.loading;
      return loading;
    }
  },
  mounted() {
    // 初始化懒加载器
    this.imageLazyLoader = createImageLazyLoader({
      threshold: 0.1,
      rootMargin: '50px'
    });
    
    // 初始化防抖节流方法
    this.throttledScroll = createThrottle(this.handleScroll, 100);
    this.debouncedSearch = createDebounce(this.handleSearch, 300);
    
    // 添加滚动事件监听
    const scrollContainer = this.$el.querySelector('.el-main');
    if (scrollContainer) {
      scrollContainer.addEventListener('scroll', this.throttledScroll);
    }
  },
  beforeDestroy() {
    // 清理懒加载器
    if (this.imageLazyLoader) {
      this.imageLazyLoader.destroy();
      this.imageLazyLoader = null;
    }
    
    // 清理防抖节流方法
    if (this.throttledScroll && this.throttledScroll.cancel) {
      this.throttledScroll.cancel();
    }
    if (this.debouncedSearch && this.debouncedSearch.cancel) {
      this.debouncedSearch.cancel();
    }
    
    // 移除滚动事件监听
    const scrollContainer = this.$el.querySelector('.el-main');
    if (scrollContainer) {
      scrollContainer.removeEventListener('scroll', this.throttledScroll);
    }
  },
  methods: {
    // 强制重置加载状态
    forceResetLoading() {
      this.$store.commit('chatList/SET_LOADING', false);
    },
    
    // 处理滚动事件（节流）
    handleScroll(event) {
      // 可以在这里添加滚动相关的逻辑
      // 例如：无限滚动、滚动位置记录等
    },
    
    // 处理搜索事件（防抖）
    handleSearch(keyword) {
      if (keyword && keyword.trim()) {
        this.$store.dispatch('chatList/searchChats', keyword.trim());
      } else {
        this.$store.dispatch('chatList/clearSearch');
      }
    },
    
    // 处理图片加载错误
    handleImageError(event) {
      event.target.src = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
      event.target.onerror = null;
    },
    
    rightClick(friendId, remark, type, id, event) {
      if (type === 1) {
        service({
          method: "get",
          url: "users/getSidewaysStatus",
          params: {
            friendId: friendId,
          },
        }).then((res) => {
          if (res && res.code === 200) {
            this.sidewaysStatus = res.data;
            this.rightClickRemark = remark;
            this.rightClickFriendId = friendId;
            this.rightClickView = true;
            if (event.button === 2) {
              this.x = event.clientX; // 更新X坐标
              this.y = event.clientY; // 更新Y坐标
            }
          } else {
            this.$notify({
              title: "服务器异常",
              type: "success",
            });
          }
        });
      } else if (type === 0) {
      }
    },
    top(status) {
      for (let i = 0; i < this.friendMenu.length; i++) {
        for (let f = 0; f < this.friendMenu[i].friendshipsDTOS.length; f++) {
          if (
            this.rightClickFriendId.toString() ===
            this.friendMenu[i].friendshipsDTOS[f].friendId.toString()
          ) {
            this.friendMenu[i].friendshipsDTOS[f].isTop = status;
            const itemToMove = this.friendMenu[i].friendshipsDTOS.splice(
              f,
              1
            )[0];
            this.friendMenu[i].friendshipsDTOS.unshift(itemToMove);
            this.insertLocation = this.insertLocation + 1;
            break;
          }
        }
      }
      service({
        method: "put",
        url: `users/isTop/${status}`,
        params: {
          friendId: this.rightClickFriendId,
        },
      });
    },
    cancelTop(status) {
      for (let i = 0; i < this.friendMenu.length; i++) {
        for (let f = 0; f < this.friendMenu[i].friendshipsDTOS.length; f++) {
          if (
            this.rightClickFriendId.toString() ===
            this.friendMenu[i].friendshipsDTOS[f].friendId.toString()
          ) {
            this.friendMenu[i].friendshipsDTOS[f].isTop = status;
            const itemToMove = this.friendMenu[i].friendshipsDTOS.splice(
              f,
              1
            )[0];
            this.friendMenu[i].friendshipsDTOS.splice(
              this.insertLocation - 1,
              0,
              itemToMove
            );
            this.insertLocation = this.insertLocation - 1;
            break;
          }
        }
      }
      service({
        method: "put",
        url: `users/isTop/${status}`,
        params: {
          friendId: this.rightClickFriendId,
        },
      });
    },
    hideFloatWindow(event) {
      this.rightClickView = false;
    },
    markUnread() {
      for (let i = 0; i < this.friendMenu.length; i++) {
        for (var f in this.friendMenu[i].friendshipsDTOS) {
          if (
            this.rightClickFriendId.toString() ===
            this.friendMenu[i].friendshipsDTOS[f].friendId.toString()
          ) {
            this.friendMenu[i].friendshipsDTOS[f].unreadCount =
              this.friendMenu[i].friendshipsDTOS[f].unreadCount + 1;
            break;
          }
        }
      }
      this.addUnreadCount(this.rightClickFriendId);
    },
    clearChatHistory() {
      this.$confirm(
        `将联系人‘${this.rightClickRemark}’聊天记录清空 ,将不能找回聊天记录`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          service({
            method: "delete",
            url: "friend_chat/clearChatMessage",
            params: {
              friendId: this.rightClickFriendId,
            },
          }).then((res) => {
            if (res && res.code === 200) {
              window.dispatchEvent(
                new CustomEvent("clearChatHistory", {
                  detail: {
                    data: this.rightClickFriendId,
                  },
                })
              );
              this.rightClickFriendId = null;
            }
          });
        })
        .catch(() => {});
    },
    //删除好友确认
    delFriend() {
      this.$confirm(
        `将联系人‘${this.rightClickRemark}’删除 ,将同时删除与该联系人的聊天记录`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          service({
            method: "delete",
            url: "users/delete/friend",
            params: {
              friendId: this.rightClickFriendId,
            },
          })
            .then((res) => {
              if (res.flag) {
                this.delFriendNotice();
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    //删除好友后置处理
    delFriendNotice(friendId) {
      if (!friendId) {
        for (let i = 0; i < this.friendMenu.length; i++) {
          for (var f in this.friendMenu[i].friendshipsDTOS) {
            if (
              this.rightClickFriendId.toString() ===
              this.friendMenu[i].friendshipsDTOS[f].friendId.toString()
            ) {
              this.friendMenu[i].friendshipsDTOS.splice(f, 1);
              break;
            }
          }
        }
        window.dispatchEvent(
          new CustomEvent("clearChatHistory", {
            detail: {
              data: this.rightClickFriendId,
            },
          })
        );
        window.dispatchEvent(new CustomEvent("initFriendshipId"));
        this.rightClickFriendId = null;
      } else {
        for (let i = 0; i < this.friendMenu.length; i++) {
          for (var f in this.friendMenu[i].friendshipsDTOS) {
            if (
              friendId.detail.data.toString() ===
              this.friendMenu[i].friendshipsDTOS[f].friendId.toString()
            ) {
              this.friendMenu[i].friendshipsDTOS.splice(f, 1);
              break;
            }
          }
        }
        window.dispatchEvent(
          new CustomEvent("clearChatHistory", {
            detail: {
              data: friendId.detail.data,
            },
          })
        );
        window.dispatchEvent(new CustomEvent("initFriendshipId"));
      }
    },
    async getFriendshipsMenu(showRules, flag) {
      try {
        // 使用Vuex action获取聊天列表
        await this.$store.dispatch('chatList/fetchChatList', {
          keyword: this.remark ? this.remark : this.username,
        });
      } catch (error) {
        this.$message.error('获取聊天列表失败');
      }
    },
    /**
     * 搜索好友后点击
     * @param friend
     */
    clickSession(friend) {
      this.activeIndex = friend.id.toString();
      friend.type = 1;
      this.$emit("completeSearch");
      this.getChat(friend);
    },
    /**
     * 在搜索添加好友时，搜索已添加的好友点击发送消息
     * @param searchResult
     */
    clickAddSession(searchResult) {
      var params = {
        id: searchResult.friendId,
        friendId: searchResult.userInfoId,
        remark: searchResult.remark,
        type: 1,
      };
      this.getChat(params);
    },
    // 获取聊天记录预处理
    preGetChat(event) {
      if (
        this.showRules !== "0" &&
        this.friendMenu[0].friendshipsDTOS !== null
      ) {
        this.friendMenu[0].friendshipsDTOS.forEach((item) => {
          if (item.friendId === event.detail.data) {
            this.activeIndex = item.id.toString();
            this.getChat(item);
          }
        });
      } else {
        var i = 0;
        for (let i = 0; i < this.friendMenu.length; i++) {
          this.friendMenu[i].friendshipsDTOS.forEach((item) => {
            if (item.friendId === event.detail.data) {
              i = 1;
              this.activeIndex = item.id.toString();
              this.getChat(item);
            }
          });
          if (i === 1) {
            break;
          }
        }
      }
    },
    getChat(event) {

      // 检查是否是新的聊天会话（来自FriendDetail）
      if (event.friendId && !this.isExistingChat(event.friendId)) {
        // 添加新聊天到列表
        this.addNewChat(event);
      }
      
      this.activeIndex = event.id.toString();
      var from = {
        friendshipId: event.targetId,
        remark: event.displayName,
        type: event.chatType === 2 ? 0 : 1, // 群聊为0，私聊为1
        groupChatCount: event.groupChatCount,
      };
      this.$emit("currentFriend", from);
      this.clearUnreadCount(event.targetId);
    },
    
    // 显示群聊详情页面
    showGroupDetail(groupData) {

      // 发送群聊详情事件到父组件
      this.$emit("groupDetail", groupData);
    },
    
    // 检查聊天是否已存在
    isExistingChat(friendId) {
      // 检查本地聊天列表
      const localExists = this.friendMenu.some(group => 
        group.friendshipsDTOS && group.friendshipsDTOS.some(friend => 
          friend.friendId === friendId || friend.id === friendId
        )
      );
      
      // 检查Vuex store中的聊天列表
      const storeExists = this.$store.state.chatList.list.some(chat => 
        chat.friendId === friendId || chat.targetId === friendId || chat.id === friendId
      );
      
      return localExists || storeExists;
    },
    
    // 添加新聊天到列表
    addNewChat(chatData) {
      // 生成唯一的ID，避免重复
      const uniqueId = chatData.id || `chat_${chatData.friendId}_${Date.now()}`;
      
      const newChat = {
        id: uniqueId,
        targetId: chatData.targetId || chatData.friendId,
        displayName: chatData.displayName,
        chatType: chatData.chatType || 1,
        groupChatCount: chatData.groupChatCount || 0,
        friendId: chatData.friendId,
        userInfoId: chatData.userInfoId,
        chatAvatar: chatData.avatar,
        isOnline: chatData.isOnline || 0,
        createdAt: new Date().toISOString(),
        latestTime: new Date().toISOString(),
        unreadCount: 0
      };
      
      // 使用Vuex添加新聊天
      this.$store.dispatch('chatList/addChat', newChat);
      
      // 同时更新本地friendMenu（如果需要）
      this.updateLocalChatList(newChat);
    },
    
    // 更新本地聊天列表
    updateLocalChatList(newChat) {
      // 检查是否需要添加到本地friendMenu
      const needsLocalUpdate = !this.friendMenu.some(group => 
        group.friendshipsDTOS && group.friendshipsDTOS.some(friend => 
          friend.friendId === newChat.friendId
        )
      );
      
      if (needsLocalUpdate) {
        // 添加到第一个分组（通常是"我的好友"）
        if (this.friendMenu.length > 0 && this.friendMenu[0].friendshipsDTOS) {
          this.friendMenu[0].friendshipsDTOS.unshift({
            id: newChat.id,
            friendId: newChat.friendId,
            targetId: newChat.targetId,
            displayName: newChat.displayName,
            chatType: newChat.chatType,
            groupChatCount: newChat.groupChatCount,
            userInfoId: newChat.userInfoId,
            chatAvatar: newChat.chatAvatar,
            isOnline: newChat.isOnline,
            isTop: 0
          });
        }
      }
    },
    isOnline(active) {
      return active === 1;
    },
    onAndOffLineNotifications(event) {
      var flag = 1;
      for (let i = 0; i < this.friendMenu.length; i++) {
        for (var f in this.friendMenu[i].friendshipsDTOS) {
          if (
            event.detail.data.onAndOffLineUserId ==
            this.friendMenu[i].friendshipsDTOS[f].friendId
          ) {
            this.friendMenu[i].friendshipsDTOS[f].isActive =
              event.detail.data.isActive;
            flag = 0;
            break;
          }
        }
        if (flag !== 1) {
          break;
        }
      }
      // this.getFriendshipsMenu(_this.friendMenu);
    },
    remoteSearchFriend(keyword) {
      service({
        url: "users/remote/friendships",
        method: "get",
        params: {
          keyword: keyword,
        },
      }).then((res) => {
        this.$refs.friendSearch.searchView(res.data);
      });
    },
    getInsertLocation() {
      service({
        method: "get",
        url: `users/getInsertLocation`,
      }).then((res) => {
        this.insertLocation = res.data;
      });
    },
    isSearchStatus(status) {
      this.isSearch = status;
    },
    messageUpdates(event) {
      var params = event.detail.data;
      
      // 使用Vuex action更新消息
      if (params.othersUserId) {
        // 双方都在面对面聊天
        this.$store.dispatch('chatList/updateLatestMessageReceived', {
          chatId: params.othersUserId,
          message: params.content,
          messageType: params.messageType
        });
      } else if (params.myUserId) {
        // 接收方在另一个好友聊天界面（非面对面）
        this.$store.dispatch('chatList/updateLatestMessageReceived', {
          chatId: params.myUserId,
          message: params.content,
          messageType: params.messageType
        });
        // 异步刷新
        this.addUnreadCount(params.myUserId);
      }
    },
    groupChatMessageUpdates(event) {
      var params = event.detail.data;
      
      // 使用Vuex action更新群聊消息
      this.$store.dispatch('chatList/updateLatestMessageReceived', {
        chatId: params.groupChatId,
        message: params.content,
        messageType: params.messageType
      });
    },
    listeningStar(event) {
      // 使用Vuex action更新星标状态
      this.$store.dispatch('chatList/updateStarStatus', {
        chatId: event.detail.data.friendId,
        isStar: event.detail.data.isStar
      });
    },
    buddyListPopulation(event) {
      // 使用Vuex action添加新好友到聊天列表
      this.$store.dispatch('chatList/addChat', event.detail.data.message);
    },
    updateRemark(event) {
      // 使用Vuex action更新备注
      this.$store.dispatch('chatList/updateRemark', {
        chatId: event.detail.data.friendId,
        remark: event.detail.data.remark
      });
    },
    addUnreadCount(friendId) {
      // 使用Vuex action增加未读数量
      this.$store.dispatch('chatList/addUnreadCount', friendId);
    },
    clearUnreadCount(friendId) {
      if (!friendId) {
        return;
      }
      // 使用Vuex action清除未读数量
      this.$store.dispatch('chatList/clearUnreadCount', friendId);
    },
    chatTime(time) {
      // 如果没有时间或时间无效，返回空字符串
      if (!time) {
        return '';
      }
      
      try {
        const date = new Date(time);
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          return '';
        }
        
        const now = new Date();
        const diff = now - date; // 计算时间差（毫秒）
        
        // 如果时间差大于一天
        if (diff > 24 * 60 * 60 * 1000) {
          return (
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1).toString().padStart(2, "0") +
            "-" +
            date.getDate().toString().padStart(2, "0")
          );
        } else {
          return (
            date.getHours().toString().padStart(2, "0") +
            ":" +
            date.getMinutes().toString().padStart(2, "0")
          );
        }
      } catch (error) {
        return '';
      }
    },
    handleSelect(event) {
      this.activeIndex = event.toString();
    },
    initAsideFriend() {
      var showSwitching = localStorage.getItem("showSwitching");
      if (showSwitching === "1") {
        this.getFriendshipsMenu(showSwitching, 1);
      } else {
        // this.getFriendshipsMenu(showSwitching, 0)
      }
    },
    text(html) {
      if (!html) {
        return "暂无消息";
      }
      var text = html.replace(/<img[^>]*>/g, "[图片] ");
      if (
        text
          .replace(/<[^<>]*>/g, "")
          .replace("&lt;", "<")
          .replace("&gt;", ">").length === 0
      ) {
        return "空白消息";
      }
      return text
        .replace(/<[^<>]*>/g, "")
        .replaceAll("&lt;", "<")
        .replaceAll("&gt;", ">");
    },
  },
  created() {
    this.getFriendshipsMenu(localStorage.getItem("showSwitching"));
    this.getInsertLocation();
  },
  mounted() {
    window.addEventListener("listeningStar", this.listeningStar);
    window.addEventListener("delFriendNotice", this.delFriendNotice);
    window.addEventListener("initAsideFriend", this.initAsideFriend);
    window.addEventListener("updateRemark", this.updateRemark);
    window.addEventListener("MessageUpdates", this.messageUpdates);
    window.addEventListener(
      "GroupChatMessageUpdates",
      this.groupChatMessageUpdates
    );
    window.addEventListener("getChat", this.preGetChat);
    window.addEventListener("buddyListPopulation", this.buddyListPopulation);
    window.addEventListener(
      "OnAndOffLineNotifications",
      this.onAndOffLineNotifications
    );
    
    // 保存事件处理函数的引用，确保能正确移除监听器
    this.contextMenuHandler = (e) => {
      e.preventDefault();
    };
    this.clickHandler = (event) => {
      this.hideFloatWindow(event);
    };
    
    document.body.addEventListener("contextmenu", this.contextMenuHandler);
    document.addEventListener("click", this.clickHandler);
    
    // 添加超时保护机制，防止加载状态卡住
    this.loadingTimeout = setTimeout(() => {
      if (this.isLoading) {
        this.forceResetLoading();
      }
    }, 10000); // 10秒超时
  },
  beforeDestroy() {
    // 移除所有window事件监听器
    window.removeEventListener("listeningStar", this.listeningStar);
    window.removeEventListener("delFriendNotice", this.delFriendNotice);
    window.removeEventListener("updateRemark", this.updateRemark);
    window.removeEventListener("initAsideFriend", this.initAsideFriend);
    window.removeEventListener("MessageUpdates", this.messageUpdates);
    window.removeEventListener(
      "GroupChatMessageUpdates",
      this.groupChatMessageUpdates
    );
    window.removeEventListener("getChat", this.preGetChat);
    window.removeEventListener("buddyListPopulation", this.buddyListPopulation);
    window.removeEventListener(
      "OnAndOffLineNotifications",
      this.onAndOffLineNotifications
    );
    
    // 正确移除事件监听器，使用保存的引用
    if (this.contextMenuHandler) {
      document.body.removeEventListener("contextmenu", this.contextMenuHandler);
      this.contextMenuHandler = null;
    }
    if (this.clickHandler) {
      document.removeEventListener("click", this.clickHandler);
      this.clickHandler = null;
    }
    
    // 清理超时定时器
    if (this.loadingTimeout) {
      clearTimeout(this.loadingTimeout);
      this.loadingTimeout = null;
    }
    
    // 清理数据引用，防止内存泄漏
    this.friendMenu = [];
    this.sidewaysStatus = null;
    this.rightClickRemark = null;
    this.rightClickFriendId = null;
    
    // 清理Vuex相关引用
    this.$store = null;
  },
};
</script>

<style scoped>
.float-window {
  position: absolute;
  width: 130px;
  background-color: #fefefe;
  border: 1px solid #ccc;
  color: black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.float-window .opear {
  font-size: 13px;
}

.float-window .opear .detail {
  padding: 5px 0 5px 30px;
  text-align: left;
  cursor: pointer;
}

.float-window .opear .detail:hover {
  background-color: #e4e4e4;
}

.aside-friend-sidebar {
  height: calc(100vh - 19vh);
  background-color: #f5f7fa;
  overflow-y: auto;
  /* 设置滚动轨道的样式 */
}

.aside-friend-sidebar::-webkit-scrollbar {
  width: 5px; /* 设置滚动条宽度 */
}

.aside-friend-sidebar::-webkit-scrollbar-track {
  background: #ffffff; /* 设置轨道背景色 */
}

.aside-friend-sidebar::-webkit-scrollbar-thumb {
  background: #c9c9c9; /* 设置滚动条颜色 */
  border-radius: 5px;
}

::v-deep .el-menu {
  background: #fff;
}

.el-menu-item.is-active {
  background-color: #e1eaf4 !important;
  color: #000000;
}

.el-menu-item.is-active span {
  color: #1c1c1c !important;
}
::v-deep .el-menu-item.is-active:focus {
  color: black;
}

/*.el-submenu {*/
/*    background: #ecf5ff;*/
/*}*/
.el-menu-item {
  margin: 10px 0;
}

::v-deep .el-menu-item[data-v-469efc1d] {
  margin: 0;
}

.friend-remark {
  display: block;
  margin-bottom: -5px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-isStar1 {
  position: absolute;
  right: 35px;
  bottom: 2px;
}

.friend-isStar2 {
  position: absolute;
  right: 10px;
  bottom: 1px;
}

.friend-latestNews {
  margin-top: -25px;
  font-size: 12px;
  width: 110px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .badge-online .el-badge__content.is-fixed.is-dot {
  right: 5px;
  top: 38px;
  background-color: #3bb54a;
  height: 8px;
  width: 8px;
  cursor: pointer;
}

::v-deep .badge-off .el-badge__content.is-fixed.is-dot {
  right: 5px;
  top: 38px;
  background-color: #999999;
  height: 8px;
  width: 8px;
  cursor: pointer;
}

.el-main {
  overflow: hidden !important;
}

.search {
  height: 50px;
  background-color: white;
}

::v-deep .el-card__body,
.el-main {
  padding: 0;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-menu-vertical-demo .group-name {
  font-weight: bold;
  font-size: 16px;
}

.el-menu-vertical-demo .el-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px 0 30px 10px;
}
.friend-latestTime {
  position: absolute;
  color: #868686;
  top: -16px;
  right: 10px;
  font-size: 13px;
  text-align: center;
}

/* 提取的内联样式 */
.font-size-16 {
  font-size: 16px;
}

.friend-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px 0 30px 10px;
}

.avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}

.friend-info-column {
  margin-left: 14px;
  display: flex;
  flex-direction: column;
}

.chat-time {
  position: absolute;
  color: #868686;
  top: -16px;
  right: 10px;
  font-size: 13px;
  text-align: center;
}

.star-icon-position {
  position: absolute;
  right: 25px;
  bottom: -3px;
}

.star-icon {
  color: #dab74d;
}

.unread-badge-position {
  position: absolute;
  left: 52px;
  top: -16px;
}

.top-icon-position {
  position: absolute;
  right: 10px;
  bottom: 1px;
}

.top-badge {
  font-size: 12px;
  color: #a4a4a4;
  background-color: #ebebeb;
  padding: 2px;
}

.empty-friends-container {
  text-align: center;
  margin-top: 280px;
}

.empty-friends-text {
  color: #b6b6b6;
  font-size: 20px;
}

.border-bottom-light {
  border-bottom: 1px solid #e1e1e1;
}
</style>
